<template>
  <div id="box" ref="box"></div>
</template>

<script setup>
import * as THREE from 'three'
import { onMounted, ref } from "vue";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const box = ref()
let control = '' //控制器
const scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry(200, 32, 32)
const material = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('http://123.60.169.66:9000/yunboo/devops/1.jpg')
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 400);

for(let i=1;i<10;i++){
  const geometry2 = new THREE.BoxGeometry( 10, 10, 1 );
  const material2 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  const cube = new THREE.Mesh( geometry2, material2 );
  cube.position.set(i*15,0,200)
  scene.add( cube );
}



const camera = new THREE.PerspectiveCamera( 20, 2, 150, 500 );
camera.position.x = 0  // 确定相机位置
camera.position.y = 0
camera.position.z = 500
camera.target = new THREE.Vector3(100, 0, 0)
control = new OrbitControls(camera, renderer.domElement);
control.dampingFactor = 1
control.enableDamping = true
control.enableZoom = false




function animate() {
  requestAnimationFrame( animate );
  control.update();
  renderer.render(scene, camera)
}


onMounted(() => {
  box.value.appendChild( renderer.domElement );
  animate();
})
</script>

<style lang="scss" scoped>
#box{
  width: 400px;
  height:400px;
}
</style>